<template>
  <el-table :data="list" style="width: 100%" height="300" header-row-class-name="table_header_title">
    <el-table-column type="index" label="排序" width="70"></el-table-column>
    <el-table-column label="群名称">
      <template #default="scope">
        <span>{{ scope.row.name }}</span>
        <span>（{{ scope.row.member_nums }} / 200）</span>
      </template>
    </el-table-column>
    <el-table-column label="群人数上线">
      <template #default="scope">
        群人数达到
        <el-input class="group_num_lint" v-model="scope.row.limit" @input="inputNum(scope.row)" :disabled="props.look" />
        人，换群加入
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-button size="small" @click="removeGroup(scope.$index, scope.row)" :disabled="props.look">删除</el-button>
      </template>
    </el-table-column>
    <template #empty>
      <img class="emty_img" src="@/assets/noData.png" alt="" />
      <div class="emty_title">{{ '暂无数据' }}</div>
    </template>
  </el-table>
  <div style="margin-top: 10px">
    <el-button :icon="Plus" @click="uploadQrewm" :disabled="props.look">添加群聊 </el-button>
  </div>
  <!-- 添加群聊 -->
  <GroupChart ref="GroupChartRef" @submit="getGroupChat" />
</template>
<script lang="ts" setup>
  import { Plus } from '@element-plus/icons-vue'
  import { onMounted, ref, computed } from 'vue'
  import GroupChart from '@/components/chart/GroupChart.vue'
  import { useStore } from '@/store'
  import { IsNotEmpty, getSetionId } from '@/utils/utils'
  import { ElMessage } from 'element-plus'
  const props = defineProps(['look'])
  const list = ref([])
  const GroupChartRef = ref(null)
  const store = useStore()
  // 群聊数据
  const inputNum = (row: any) => {
    let num = row.limit
    num = num.replace(/\D/g, '')
    if (num >= 200) {
      num = 200
    }
    if (num <= 1) {
      num = 1
    }
    row.limit = num
    // list.value.map((item:any)=>{
    //   if(item.groupchat_id==row.groupchat_id){
    //     item.limit = num
    //   }
    // });
  }
  const uploadQrewm = () => {
    GroupChartRef.value.appDialog.visible = true
  }
  const removeGroup = (index: number, row: any) => {
    list.value = list.value.filter((item: any) => item.groupchat_id != row.groupchat_id)
  }
  // 添加群聊
  const getGroupChat = (data: any) => {
    let arr: any[] = [],
      ids = getSetionId('groupchat_id', list.value)
    if (IsNotEmpty(data)) {
      data.forEach((item: any) => {
        if (!ids.includes(item.group_id)) {
          arr.push({
            limit: 200,
            groupchat_id: item.group_id,
            name: item.name,
            member_nums: item.members_num
          })
        } else {
          ElMessage.warning(`${item.name}已添加`)
        }
      })
    }
    list.value = list.value.concat(arr)
  }

  defineExpose({
    list
  })
</script>

<style scoped lang="scss">
  .emty_img {
    transform: translateX(15%);
  }
  .emty_title {
    margin-top: -50px;
  }
  .group_num_lint {
    width: 80px;
  }
  .table_header_title {
    height: 60px;
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
</style>
